<template>
  <Form ref="loginForm" :model="form" @keydown.enter.native="handleSubmit">
    <FormItem prop="userPhone">
      <label class="common_login">
        <span>用户名</span>
        <Input prefix="ios-contact" placeholder="请输入用户名" v-model="form.userName"/>
      </label>
    </FormItem>
    <FormItem prop="password">
      <label class="common_login">
        <span>密码</span>
        <Input prefix="md-lock" placeholder="请输入密码" type="password" v-model="form.password"/>
      </label>
    </FormItem>
    <FormItem prop="code">
      <div class="login-code">
        <div>
          <label>
            <span>验证码</span>
            <Input prefix="ios-barcode" placeholder="请输入验证码" v-model="form.code"/>
          </label>
        </div>
        <div>
          <img :src="img_code" @click="refreshCode" title="刷新验证码" />
        </div>
      </div>
    </FormItem>
    <FormItem>
      <label class="common_login">
        <Checkbox v-model="form.keep" :true-value="1" :false-value="0">
          <span>记住密码</span>
        </Checkbox>
      </label>
    </FormItem>
    <FormItem>
      <Button @click="handleSubmit" type="primary" long>登录</Button>
    </FormItem>
  </Form>
</template>
<script>
export default {
  name: 'LoginForm',
  props: {
    userNameRules: {
      type: Array,
      default: () => {
        return []
      }
    },
    passwordRules: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      img_code:'http://localhost:8089/adminapi/code/index?'+Math.random(),
      form: {
        userName: '',
        password: '',
        code: '',
        keep:'0'
      }
    }
  },
  computed: {
    rules() {
      return {}
    }
  },
  methods: {
    refreshCode(){
      this.img_code='http://localhost:8089/adminapi/code/index?'+Math.random();
    },
    handleSubmit() {
      if (this.form.userName === '' || this.form.password === '' || this.form.code === '') {
        this.$Notice.error({
          title: '登入失败',
          desc: '用户名，密码，验证码必填项 '
        });
        return;
      }
      this.$emit('on-success-valid', {
        userName: this.form.userName,
        password: this.form.password,
        code: this.form.code,
        keep:this.form.keep
      })
    }
  }
}
</script>
